import { defineComponent, reactive, computed } from 'vue';
import _ from 'lodash';
import { TabHeader } from '@/../packages'
import styles from './index.module.less';

export default defineComponent({
    setup() {
        const state = reactive({
            count: 20,
            tabKey: 0,
        });

        const handleTabChange = (data) => {
            state.tabKey = data.tabKey;
        };

        const tabList = computed(() => {
            let list = [];
            for (let i = 0; i < state.count;) {
                list.push({ label: `运行日志${++i}` })
            }
            return list;
        })

        return () => (<div class={styles.container}>
            <div class={styles.innerContainer}>
                <TabHeader tabList={tabList} onChange={handleTabChange}>
                    {{
                        default: (data, index) => {
                            return `${index + 1}-${_.get(data, 'label')}`
                        }
                    }}
                </TabHeader>
                <div class={styles.tabContent}>
                    <div class={styles.count}>
                        数量：<input type="number" v-model={state.count} />
                    </div>
                    {1 + state.tabKey}
                </div>
            </div>
        </div>)
    }
})